<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
	<h1>windows下浏览器F12查看控制台输出内容，已跨域页面上为返回的json格式数据</h1>	
  <h3>{{ getMessage }}</h3>
  <h3>{{ postMessage }}</h3>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    getMessage: '',
    postMessage: ''
  },
  mounted:function(){
  	var that = this;
  	that.getter();
  	// that.poster();
  },
  methods:{
  	getter(){
  		var that = this;
  		//实现跨域
  		axios.get('http://193.112.147.89:3000/book/getAllBooks', {
		  })
		  .then(function (response) {
		  	that.getMessage = response.data;
		    console.log(response);
		  })
		  .catch(function (error) {
		  	that.getMessage = "get请求失败";
		    console.log(error);
		  });
		  //未实现跨域
		// axios.get('http://121.89.183.4:8001/book/get/1', {
		//   })
		//   .then(function (response) {
		//   	that.getMessage = response.data;
		//     console.log(response);
		//   })
		//   .catch(function (error) {
		//     console.log(error);
		//   });
  	},
  	poster(){
  		var that = this;
		axios.post('/user', {
		    firstName: 'Fred',
		    lastName: 'Flintstone'
		  })
		  .then(function (response) {
		  	that.postMessage = response.data;
		    console.log(response);
		  })
		  .catch(function (error) {
		  	that.postMessage = "post请求失败";
		    console.log(error);
		  });
  	}
  }
})
</script>
</html>